<template>
    <div class="app-container">
        <TableCard>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="warning"
                        plain
                        size="mini"
                        @click="
                            () => {
                                $router.go(-1);
                            }
                        "
                        v-hasPermi="['back:contract:export']"
                        >返回</el-button
                    >
                </el-col>
            </el-row>

            <el-table
                :border="Global.tableShowBorder"
                v-loading="loading"
                :data="salaryDataList"
            >
                <el-table-column type="index" label="序号"></el-table-column>

                <el-table-column label="年份" align="center" prop="year">
                </el-table-column>
                <el-table-column
                    label="应发合计（元）"
                    align="center"
                    prop="yf"
                >
                    <template slot-scope="scope">
                        <span style="font-weight: 900; color: red">{{
                            util.toEsStr2(scope.row.yf)
                        }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="实发合计（元）"
                    align="center"
                    prop="sf"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <span style="color: red; font-weight: 900">{{
                            util.toEsStr2(scope.row.sf)
                        }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 10"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </TableCard>

        <el-drawer
            title="查看工资单"
            :visible.sync="open"
            :size="1000"
            append-to-body
            class="openForm"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
                disabled
            >
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="基础工资" prop="basic">
                        <el-input disabled v-model="form.basic">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="岗位工资" prop="post">
                        <el-input disabled v-model="form.post">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="奖励工资" prop="position">
                        <el-input disabled v-model="form.position">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="绩效工资" prop="performance">
                        <el-input disabled v-model="form.performance">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="补贴合计" prop="house">
                        <el-input disabled v-model="form.house">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="保险合计" prop="grsb">
                        <el-input disabled v-model="form.grsb">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="公积金合计" prop="grgjj">
                        <el-input disabled v-model="form.grgjj">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="加班费" prop="gz996">
                        <el-input disabled v-model="form.gz996">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12">
                    <el-form-item label="请假扣款" prop="jqkk">
                        <el-input disabled v-model="form.jqkk">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="应发合计" prop="yfgz">
                        <el-input disabled v-model="form.yfgz">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="实发合计" prop="sfgz">
                        <el-input disabled v-model="form.sfgz">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div class="drawer-footer">
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { getSalaryData, getMaxMonth, getStuffs } from "@/api/hrm/salaryData";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listPostAll } from "@/api/system/post";
import { listSalaryItemConfig } from "@/api/hrm/salaryItemConfig";

export default {
    name: "SalaryData",
    dicts: ["hrm_staff_type"],
    components: { Treeselect },
    data() {
        return {
            salaryTypeList: [
                { id: "0", name: "基本工资", status: "1" },
                { id: "1", name: "津贴", status: "1" },
                { id: "2", name: "浮动工资", status: "1" },
                { id: "3", name: "奖金", status: "1" },
                { id: "4", name: "提成工资", status: "1" },
                { id: "5", name: "计件工资", status: "1" },
                { id: "6", name: "计时工资", status: "1" },
                { id: "7", name: "工龄/司龄工资", status: "1" },
                { id: "8", name: "职称工资", status: "1" },
                { id: "9", name: "代扣代缴", status: "1" },
                { id: "10", name: "企业代缴", status: "1" },
                { id: "11", name: "税前补发", status: "1" },
                { id: "12", name: "税前补扣", status: "1" },
                { id: "13", name: "税后补发", status: "1" },
                { id: "14", name: "税后补扣", status: "1" },
                { id: "15", name: "特殊计费项", status: "1" },
                { id: "16", name: "加班工资", status: "1" },
                { id: "17", name: "考勤组扣款明细", status: "1" },
                { id: "18", name: "个税抵扣", status: "1" },
                { id: "50", name: "应发工资", status: "1" },
                { id: "51", name: "应税工资", status: "1" },
                { id: "52", name: "个人所得税", status: "1" },
                { id: "53", name: "实发工资", status: "1" },
            ],
            salaryConfigList: [],
            deptOptions: [],
            postList: [],
            //核算月份
            startPeriod: "暂无",
            endPeriod: "暂无",
            showInitData: false,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 工资核算表格数据
            salaryDataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderByColumn: "createTime",
                isAsc: "descending",
                staffId: null,
                code: null,
                name: null,
                amt: null,
                periodYear: null,
                periodMonth: null,
                year_month: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            periodYear: "",
            periodMonth: "",
            // calcForm: {},
        };
    },
    created() {
        this.getSalaryConfigList();
        this.getTreeselect();
        this.getPostData();
        this.initList();
    },
    methods: {
        goTotal() {
            this.$router.push({
                path: "/commonWorker/personPayManagerTotal",
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");

            this.download(
                "/hrm/salaryData/gr/export",
                {
                    ...this.queryParams,
                },
                `个人工资发放记录_${
                    year + "年" + month + "月" + day + "日"
                }.xlsx`
            );
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                staffId: null,
                periodYear: null,
                periodMonth: null,
                createTime: null,
                createBy: null,
                tenantId: null,
                basic: null,
                post: null,
                position: null,
                house: null,
                temperature: null,
                traffic: null,
                meal: null,
                phone: null,
                performance: null,
                month: null,
                quarter: null,
                year: null,
                attendance: null,
                recommend: null,
                sale: null,
                calcCount: null,
                calcTime: null,
                workAge: null,
                comAge: null,
                professional: null,
                skill: null,
                education: null,
                grsb: null,
                grgjj: null,
                qysb: null,
                qygjj: null,
                sqbf: null,
                sqbk: null,
                shbf: null,
                df: null,
                ghf: null,
                bcyl: null,
                sybxj: null,
                gz996: null,
                cdkk: null,
                ztkk: null,
                kgkk: null,
                jqkk: null,
                qkkk: null,
                zhkk: null,
                kqkkhj: null,
                kcZnjy: null,
                kcZfzj: null,
                kcFdlx: null,
                kcSylr: null,
                kcJxjy: null,
                yfgz: null,
                ysgz: null,
                grsds: null,
                sfgz: null,
                custom53: null,
                custom54: null,
            };
            this.resetForm("form");
        },
        /** 查询工资核算列表 */
        initList() {
            //查询数量
            getMaxMonth().then((res) => {
                this.loading = false;
                if (res.data.max != "noData") {
                    let arr = res.data.max.split("-");
                    let next = res.data.next.split("-");
                    // this.calcForm.periodYear = next[0];
                    // this.calcForm.periodMonth = next[1];
                    this.queryParams.periodYear = arr[0];
                    this.queryParams.periodMonth = arr[1];
                    this.queryParams.year_month = arr[0] + "-" + arr[1];
                    this.getList();
                }
            });
        },
        getList() {
            this.loading = true;
            getStuffs(this.queryParams).then((response) => {
                this.salaryDataList = response.data;

                this.loading = false;
            });
        },
        getSalaryConfigList() {
            listSalaryItemConfig().then((res) => {
                this.salaryConfigList = res.data;
                let typeArr = this.salaryTypeList;
                this.salaryConfigList.forEach((item) => {
                    typeArr.forEach((t) => {
                        console.log(
                            item.type +
                                "," +
                                item.name +
                                "。" +
                                t.id +
                                "," +
                                t.name
                        );
                        if (t.id == item.type) {
                            if (item.status == "0") {
                                t.status = "0";
                            }
                        }
                    });
                });
                this.salaryTypeList = typeArr;
            });
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 查询按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;

            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.periodMonth = null;
            this.queryParams.periodYear = null;
            this.handleQuery();
        },
        getPostData() {
            listPostAll().then((res) => {
                this.postList = res.data;
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            if (this.$store.getters.allDefectObj["HR-WEB-157"] == 0) {
                return;
            }

            this.reset();
            const id = row.id || this.ids;
            getSalaryData(id).then((response) => {
                this.form = response.data;

                this.open = true;
            });
        },
        parsePostName(ids) {
            let nameArr = [];
            if (ids) {
                let selIds = ids.split(",");
                this.postList.forEach((item) => {
                    selIds.forEach((sel) => {
                        if (item.postId == sel) {
                            nameArr.push(item.postName);
                        }
                    });
                });
            }
            return nameArr.join(",");
        },
        ifHave(code) {
            let re = false;
            this.salaryConfigList.forEach((item) => {
                if (item.code == code) {
                    if (item.status == "0") {
                        re = true;
                    }
                }
            });
            return re;
        },
        ifTypeHava(type) {
            let re = false;
            this.salaryConfigList.forEach((item) => {
                if (item.type == type) {
                    if (item.status == "0") {
                        re = true;
                    }
                }
            });
            return re;
        },
        calcTatal() {},
        selectMonth(value) {
            console.log(value);
            if (value) {
                let arr = value.split("-");
                this.queryParams.periodYear = arr[0];
                this.queryParams.periodMonth = arr[1];
            }
        },
    },
};
</script>
